<template>
  <yer-base-page>
    <view class="px-3">
      <yer-form
        ref="yerForm"
        :label-width="200"
        :config="config"
        :model.sync="formData">
        <template v-slot:xm:right>
          <div>555</div>
        </template>
        <template v-slot:xzz:right>
          <div>777</div>
        </template>
        <template v-slot:xzz>
          <u-input v-model="formData.xzz"></u-input>
        </template>
      </yer-form>
      <u-button type="primary" @click="submit">提交</u-button>
    </view>
  </yer-base-page>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        input: '张三',
        textview: 'textview'
      },
      config: [
        {
          type: 'YerInput',
          key: 'input', //
          label: '文本',
          required: false
        },
        {
          type: 'YerTextview',
          key: 'textview', //
          label: '只读文本',
          required: false
        },
        {
          type: 'YerTextarea',
          key: 'textarea', //
          label: '文本域',
          required: false
        },
        {
          type: 'YerIdcard',
          key: 'idcard', //
          label: '身份证号',
          required: true,
          placeholder: '请填写身份证'
        },
        {
          type: 'YerCarPlate',
          key: 'carPlate', //
          label: '车牌号',
          required: true,
          placeholder: '请填写车牌号'
        },
        {
          type: 'YerPhone',
          key: 'phone', //
          label: '手机号',
          required: true,
          placeholder: '请填写手机号'
        },
        {
          type: 'YerSelect',
          key: 'select', //
          label: '上拉单选',
          list: [
            {
              label: '男',
              value: '1'
            },
            {
              label: '女',
              value: '2'
            },
            {
              label: '不明',
              value: '0'
            }
          ],
          required: true
        },
        {
          type: 'YerRadio',
          key: 'radio', //
          label: '单选',
          labelName: 'zdmc',
          valueName: 'zddm',
          visible: true,
          list: [
            {
              zdmc: '是',
              zddm: '1'
            },
            {
              zdmc: '否',
              zddm: '2'
            }
          ],
          required: true
        },
        {
          type: 'YerRadio',
          key: 'radio', //
          label: '单选',
          visible: (formData) => {
            console.log('visible回调', formData)
            if (formData.sfxb === '1' && formData.xm === '隐藏') {
              return false
            }
            return true
          },
          labelName: 'zdmc',
          valueName: 'zddm',
          list: [
            {
              zdmc: '是',
              zddm: '1'
            },
            {
              zdmc: '否',
              zddm: '2'
            }
          ],
          required: true
        },
        {
          type: 'YerCheckbox',
          key: 'checkbox', //
          label: '多选',
          list: [
            {
              label: '男',
              value: '1'
            },
            {
              label: '女',
              value: '2'
            },
            {
              label: '不明',
              value: '0'
            }
          ],
          required: true
        },
        {
          type: 'YerSideSelect',
          key: 'sideSelect', //
          label: '侧边单选',
          list: [
            {
              label: '男',
              value: '1'
            },
            {
              label: '女',
              value: '2'
            },
            {
              label: '不明',
              value: '0'
            }
          ],
          required: true
        },
        {
          type: 'YerSideSelectMutil',
          key: 'sideSelectMutil', //
          label: '侧边多选',
          list: [
            {
              label: '男',
              value: '1'
            },
            {
              label: '女',
              value: '2'
            },
            {
              label: '不明',
              value: '0'
            }
          ],
          required: true
        },
        {
          type: 'YerDate',
          key: 'date', //
          label: '日期',
          required: true
        },
        {
          type: 'custom',
          label: '(性别不明)自定义组件',
          key: 'xzz', //
          visible: (formData) => {
            if (formData.select === '0') {
              return true
            }
            return false
          },
          rules: [
            {
              required: true,
              message: '自定义组件必填',
              // 可以单个或者同时写两个触发验证方式
              trigger: 'blur,change'
            }
          ]
        },
        {
          type: 'YerImageUpload',
          key: 'rxzp', //
          label: '图片上传',
          mode: 'base64'
        }
      ]
    }
  },
  methods: {
    submit() {
      console.log()
      this.$refs.yerForm.getValidateFormData()
      console.log('formData', this.formData)
    }
  }
}
</script>

<style></style>
